<template>
  <view class="register">
    <view class="register-title">修改登录密码</view>

    <view class="form-v2">
      <view class="login-input betweenBox">
        <view class="prefix">
          <view v-if="isEdit" class="country-code">
            <view class="picker">
              {{ countryCode }}
            </view>
          </view>
          <picker
            v-else
            class="country-code"
            :value="countryCodeIndex"
            :range="countryCodeTxtAndCodeList"
            @change="countryCodeChange"
          >
            <view class="picker">
              {{ countryCodeTxtList[countryCodeIndex] || '' }}
            </view>
          </picker>
        </view>
        <view class="input-warp">
          <input
            v-model="mobilePhone"
            class="ipt"
            placeholder="请输入手机号码"
            :disabled="isEdit"
          />
        </view>
        <view class="addon">
          <server-image
            v-if="!isEdit && mobilePhone"
            class="del-icon disb"
            name="loginIcon20201020002.png"
            mode="aspectFill"
            @click="mobilePhone = ''"
          ></server-image>
        </view>
      </view>

      <view class="login-input betweenBox">
        <view class="input-warp">
          <input v-model="imgCode" class="ipt" placeholder="请输入图形验证码" />
        </view>
        <view class="addon">
          <c-image
            class-name="img-code disb"
            :src="imgCodePath"
            mode="aspectFit"
            @click="initImgCode"
          ></c-image>
        </view>
      </view>

      <view class="login-input betweenBox">
        <view class="input-warp">
          <input v-model="smsCode" class="ipt" placeholder="请输入手机验证码" />
        </view>
        <view class="addon">
          <view class="addon-warp flex-box">
            <view class="v-code" :class="{ deny: !allowGetCode }" @click="getCode">
              <text v-if="allowGetCode">获取验证码</text>
              <text v-else>重新发送{{ countDown }}S</text>
            </view>
          </view>
        </view>
      </view>

      <view class="login-input betweenBox">
        <view class="input-warp">
          <input
            v-model="password"
            class="ipt"
            placeholder="6-16位字母数字组合登录密码"
            :password="!showPassword"
          />
        </view>
        <view class="addon">
          <view class="addon-warp flex-box" @tap="showPassword = !showPassword">
            <server-image
              v-if="!showPassword"
              class="visible-icon disb"
              name="publicInputIconHide.png"
              mode="aspectFill"
            ></server-image>
            <server-image
              v-else
              class="visible-icon disb"
              name="publicInputIconDisplay.png"
              mode="aspectFill"
            ></server-image>
          </view>
        </view>
      </view>
    </view>

    <view class="w100 h90 flex-box background-theme white radius45 ffaa fw600 fs34 mgt60"
      @click="submit">
      提交
    </view>

  </view>
</template>

<script>
import config from '@/common/config';
import { mapState, mapActions } from 'vuex';
import { isObject, encryptPassword } from '@/common/utils';

export default {
  data() {
    return {
      mobilePhone: '',
      password: '',
      showPassword: false,
      countryCodeIndex: 0,
      imgCodePath: '',
      allowGetCode: true,
      imgCode: '',
      smsCode: '',
      isEdit: false,
      countDown: 60,
      smsCodeTimer: null,
    };
  },
  computed: {
    ...mapState({
      countryCodeList: (state) => state.countryCode || [],
      memberInfo: (state) => state.memberInfo || [],
    }),
    countryCodeTxtAndCodeList: function () {
      return this.countryCodeList.map((v) => `${v.countryName} ${v.countryCode}`);
    },
    countryCodeTxtList: function () {
      return this.countryCodeList.map((v) => v.countryCode);
    },
    countryCode: function () {
      if (this.memberInfo.id) return this.memberInfo.countryCode;
      else return this.countryCodeTxtList[this.countryCodeIndex];
    },
  },
  onLoad() {
    this.getCountryList();
    this.initImgCode();
    if (this.memberInfo.id) {
      this.isEdit = true;
      this.mobilePhone = this.memberInfo.mobilePhone;
    }
  },
  methods: {
    ...mapActions(['getCountryList']),
    countryCodeChange(e) {
      this.countryCodeIndex = e.detail.value;
    },

    getCode() {
      if (!this.allowGetCode) return;
      if (!this.mobilePhone) {
        this.showMessage({ title: '请输入手机号码' });
        return;
      }

      if (!this.imgCode) {
        this.showMessage({ title: '请输入图片验证码' });
        return;
      }

      this.allowGetCode = false;
      this.timeCountdown();

      const params = {
        mobilePhone: this.mobilePhone,
        verifyCode: this.imgCode,
        key: this.key,
        type: 5,
        countryCode: this.countryCode,
      };

      this.apiUrl
        .getCode({ data: params })
        .then((res) => {
          if (res.data.code == 0) {
            this.allowGetCode = false;
            this.showMessage({ title: '验证码已发送' });
            return;
          }
          return Promise.reject(res);
        })
        .catch((err) => {
          this.allowGetCode = true;
          clearTimeout(this.smsCodeTimer);
          this.initImgCode();

          if (!isObject(err)) return;

          if (err.data.status == 'timeout') {
            this.showMessage({ title: '获取验证码失败' });
            return;
          }

          this.showMessage({ title: err.data.message });
        });
    },

    submit() {
      const vm = this
      // if (this.btnDisabled) return
      if (!this.password) {
        vm.showMessage({
          title: '请输入完整信息',
          duration: 2000
        })
      } else if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(this.password)) {
        vm.showMessage({
          title: '请输入6-16位数字和字母',
          duration: 2000
        })
      } else {
        this.apiUrl
          .memberUpdatePass({
            data: {
              mobilePhone: this.mobilePhone,
              password: encryptPassword(this.password),
              countryCode: this.countryCode,
              type: 1,
              smsCode: this.smsCode,
            },
          })
          .then((res) => {
            const { code,msg:message='' } = res.data
            if (code == 0) {
              vm.showMessage({
                title: '修改成功,请重新登录',
                duration: 2000
              })
              setTimeout(() => {
                // uni.navigateBack()
                this.logout();
              }, 2000);
            } else {
              vm.showMessage({
                title: message,
                duration: 1500
              })
            }
          });
      }
    },
    logout() {
      this.$store.commit('logout');
      uni.navigateTo({
        url: '/pages/login/login',
      });
    },
    initImgCode() {
      this.key = new Date().getTime();
      this.imgCodePath = config.baseUrl + '/member_veryCode.action?key=' + this.key;
      this.imgCode = '';
    },
    timeCountdown() {
      if (!this.countDown) {
        this.countDown = 60;
        clearTimeout(this.smsCodeTimer);
        this.allowGetCode = true;
        return;
      }
      this.countDown--;
      this.smsCodeTimer = setTimeout(() => {
        this.timeCountdown();
      }, 1000);
    },
  },
};
</script>

<style lang="less" scoped>
.register {
  padding-left: 60rpx;
  padding-right: 60rpx;
}

.register-title {
  padding-top: 60rpx;
  height: 62rpx;
  font-size: 44rpx;
  color: #333333;
  line-height: 62rpx;
  text-align: center;
  margin-bottom: 70rpx;
}

.img-code {
  width: 150rpx;
  height: 70rpx;
  display: block;
  overflow: hidden;
}

.v-code {
  height: 37rpx;
  line-height: 37rpx;

  text {
    font-size: 26rpx;
    color: #1c4c98;
  }

  &.deny text {
    color: #b4b1aa;
  }
}

.agreement {
  display: flex;
  align-items: center;

  text {
    margin-left: 20upx;
    color: #656565;
    height: 40upx;
    font-size: 28upx;
    line-height: 40upx;
    overflow: hidden;
  }

  .underline {
    color: #1b4b97;
    text-decoration: underline;
  }
}

.agreement-checkbox .icon {
  width: 32upx;
  height: 32upx;
  display: block;
}

</style>

<style lang="less" scoped>
.country-code {
  height: 40rpx;
  border-right: 1px solid #b4b1aa;
  padding-right: 24rpx;
  margin-right: 24rpx;

  .picker {
    font-size: 34rpx;
    font-weight: 400;
    color: #333333;
    line-height: 40rpx;
  }
}
</style>
